@charset "utf-8";
@import "reset.scss";
@keyframes upDown{
    50%{
        transform: translateY(60px);
    }
    100%{
        transform: translateY(0px);
    }
}
@mixin ab_row_auto{
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}
@mixin group_con{
    &{
        padding: 0 23px;
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
    }
    div{
        width: 100%;
        &:first-child{
            margin-bottom:22px;
        }
        &:nth-child(2){
            margin-bottom: 46px;
        }
        h3{
            color: #035dac;
            font-size:18px;
            cursor: pointer;
        }
        p{
            color: #035caa;
            font-size: 13px;
            line-height: 24px;
            cursor: pointer;
        }
        a{
            font-size:14px;
            color: #085293;
            display: inline-block;
            width: 110px;
            height: 26px;
            border: 2px solid #085394;
            border-radius: 2px;
        }
    }
}
html::-webkit-scrollbar { width: 0 !important;}
body{
        width: 1920px;
        margin: 0 auto;
    header{
        nav{
            width:95%;
            @include ab_row_auto;
            z-index: 2;
            color: white;
            display: flex;
            justify-content: space-between;
            margin-top: 39px;
            div{
                &:first-child{
                    font-size: 0;
                    width: 72px;
                    p{
                        font-size: 18px;
                        height: 18px;
                        line-height: 1;
                        margin-bottom: 10px;
                    }
                    img{
                        width: 100%;
                    }
                }
                &:last-child{
                    font-size: 0;
                    p{
                        font-size: 18px;
                        height: 18px;
                        line-height: 1;
                    } 
                }
            }
        }
        .swiper-container {
            position: relative;
            // border: 1px solid slategrey;
            width: 100%;
            // height: 843px;
            .swiper-wrapper{
                // background: skyblue;
                .swiper-slide{
                    width: 100%;
                    font-size: 0;
                    img{
                        width: 100%;
                    }
                }
            }
            .swiper-button-prev{
                width: 66px;
                height: 66px;
                background-image: url(../img/page-left.png);
                background-size: contain;
            }
            .swiper-button-next{
                width: 66px;
                height: 66px;
                background-image: url(../img/page-right.png);
                background-size: contain;
            }
            .my-pagination{
                z-index: 2;
                position: absolute;
                top: 50%;
                left: 0;
                right: 0;
                margin: auto;
                transform: translateY(-50%);
                width:92%;
                display:flex;
                justify-content: space-between;
            }
        } 
    }
    .reserve{
        height: 200px;
        background-color: #035dac;
        display: flex;
        align-items: center;
        position: relative;
        >div:first-of-type{
            z-index: 2;
            display: inline-block;
            height: 200px;
            width: 652px;
            vertical-align: top;
            background-color: black;
            transform: translateY(25px);
            // padding: 40px 215px;
            div{
                z-index: 2;
                width: 223px;
                margin: 40px auto 0 auto;
                h2,h6{
                    color:#fff;
                }
                h2{
                    font-size: 45px;
                    letter-spacing: 10px;
                }
                h6{
                    font-size: 20px;
                    letter-spacing: 3px;
                }
                p{
                    color: #292823;
                }
            }
        }
        .search{
            display: flex;
            // align-items: center;
            padding-left: 50px;
            ul{
                font-size: 18px;
                display: flex;
                align-items: center;
                li{
                    width: 187px;
                    margin-right: 25px;
                    color: #ecf3f5;
                    div{
                        color:white;
                        margin-bottom: 14px;
                        height: 18px;
                        line-height: 18px;
                    }
                    input{
                        width: 185px;
                        height: 60px;
                        padding: 0 13px;
                    }
                }
            }
            >div input{
                width: 210px;
                height: 70px;
                background-color: black;
                color:#fff;
                margin-top: 26px;
            }
        }
        .line{
            z-index: 2;
            position: absolute;
            top: 170px;
            img{
                width: 100%;
            }
        }
    }
    .group-info{
        position: relative;
        .group-top{
            font-size: 0;
            img{
                width: 100%;
            }
        }
        .group-content{
            background-color: #1d1c17;
            padding-bottom: 100px;
            .swiper-slide div{transition:all 0.3s;}
            .swiper-slide div:hover,.group-con-01 div:hover{
                background-color: #262520 !important;
            }
            .swiper-slide h3,.swiper-slide p{
                transition:all 0.3s;
            }
            .swiper-slide div:hover h3,.swiper-slide div:hover p{
                color:white !important;
            }
            .group-con-btn a{transition: background-color 0.3s;}
            .group-con-btn a:hover{
                color: #fff !important;
                background-color:#035dac; 
            }
            // 第一组内容
            .group-con-01{
                display: flex;
                >div{
                    width: 16.66%;
                    height: 483px;
                    &:first-child,&:nth-child(2){
                        background-color: #23221d;
                    }
                    &:nth-child(3){
                        background-color: #1e1d18;
                    }
                    &:nth-child(4){
                        background-color: #21201b;
                        @include group_con;
                        div{
                            &:nth-child(2){
                                margin-bottom: 60px;
                            }
                        }
                    }
                    &:nth-child(5){
                        background-image:url("../img/group_con_01.png");
                        background-size: 100%;
                    }
                    &:nth-child(6){
                        background-color: #262520;
                    }
                }
            }
            .group-con-02{
                .swiper-button-prev{
                    left: 260px;
                }
                .swiper-button-next{
                    right: 260px;
                }
                .swiper-wrapper{
                    .swiper-slide{
                        display: flex;
                        flex-wrap: wrap;
                        >div{
                            width: 16.66%;
                            // height: 16.25vw;
                            height: 310px;
                            @include group_con;
                            background-size: 100%;
                            background-repeat: no-repeat;
                            &:first-child{
                                background-color: #1e1d18;
                            }
                            &:nth-child(2),&:nth-child(17){
                                background-color: #035dac;
                            }
                            &:nth-child(5){
                                background-color: #1e1d18;
                            }
                            &:nth-child(9){
                                background-color: #1e1d18;
                            }
                            &:nth-child(6),&:nth-child(14){
                                background-color: #262520;
                            }
                            &:nth-child(7),&:nth-child(13),&:nth-child(15){
                                background-color: #22211c;
                            }
                            &:nth-child(12),&:nth-child(18){
                                background-color: #1d1c17;
                            }
                            // 修改字体颜色
                            &:nth-child(2){
                                >div h3,p,a{
                                    color: #fff !important;
                                    border-color: #fff !important;
                                }
                            }
                            &:nth-child(9){
                                >div h3,p,a{
                                    color: #fff !important;
                                    border-color: #fff !important;
                                }
                            }
                            &:nth-child(17){
                                >div h3,p,a{
                                    color: #fff !important;
                                    border-color: #fff !important;
                                }
                            }
                            // 设置背景图
                            &:nth-child(3){
                                background-image: url("../img/group_con_02.png");
                            }
                            &:nth-child(4){
                                background-image: url("../img/group_con_03.png");
                            }
                            &:nth-child(8){
                                background-image: url("../img/group_con_04.png");
                            }
                            &:nth-child(10){
                                background-image: url("../img/group_con_05.png");
                            }
                            &:nth-child(11){
                                background-image: url("../img/group_con_06.png");
                            }
                            &:nth-child(16){
                                background-image: url("../img/group_con_05.png");
                                background-position: bottom;
                            }
                        }
                    }
                }
            }
        }
        .flotage-l{
            width: 958px;
            position: absolute;
            top: 272px;
            left: 0;
            // animation: upDown 8s 4s infinite linear;
            img{
                width: 100%;
            }
        }
        .flotage-r{
            width: 860px;
            position: absolute;
            top: 176px;
            left: 848px;
            animation: upDown 8s infinite linear;
            img{
                width: 100%;
            }
        }
    }
    .group-vision{
        display: flex;
        padding-bottom: 115px;
        .vision-left{
            z-index: 2;
            margin-top: -150px;
            opacity: 0;
            transition:all 1.5s;
        }
        .vision-right{
            flex-grow: 1;
            text-align: center;
            padding-top: 82px;
            >div{
                width: 988px;
                margin: 0 auto;
            }
            .vision-r-top,.vision-r-mid{
                margin-bottom: 40px;
                h2{
                    font-size: 30px;
                    height: 30px;
                    line-height: 30px;
                    margin-bottom: 22px;
                }
                p{
                    font-size: 17px;
                    line-height: 30px;
                }
            }
            .vision-r-mid{
                color: #035dac;
            }
            .vision-r-bto{
                width:1294px;
                position: relative;
                .blueBox::before{
                    content: "";
                    display: inline-block;
                    height: 78px;
                    width: 50%;
                    position: absolute;
                    left: 0;
                    top: 0;
                    background-color: #035dac;
                    transition: transform 0.3s;
                }
                .blueBox::after{
                    content: "";
                    display: inline-block;
                    height: 78px;
                    width: 50%;
                    position: absolute;
                    right: 0;
                    transform: translateY(165px);
                    background-color: #035dac;
                    transition: transform 0.3s;
                }
                .actBlue{
                    &::before{
                        transform: translateY(165px);
                    }
                    &::after{
                        transform: translateY(0px);
                    }
                }
                .people-swiper{
                    .swiper-slide{
                        padding-bottom: 50px;
                    }
                    .swiper-pagination-bullet{
                        width: 64px;
                        height: 10px;
                        border-radius:0;
                        background-color: #1d1c17;
                        opacity: 1;
                    }
                    .swiper-pagination-bullet-active{
                        background-color: #035dac;
                        opacity: 1;
                    }
                }
                .people-list{
                    width: 100%;
                    // position: absolute;
                    // left: 0;
                    // top: 0;
                    display: flex;
                    justify-content: space-between;
                    li{
                        width: 243px;
                        >div{
                            font-size: 0;
                            margin: 34px 0 40px 0;
                            // img{
                            //     width: 100%;
                            // }
                        }
                        h3{
                            font-size: 22px;
                            height: 22px;
                            line-height: 22px;
                            margin-bottom: 18px;
                        }
                        p{
                            text-align: left;
                            font-size: 12px;
                            transform: scale(0.95);
                            line-height: 14px;
                        }
                    }
                }
            }
        }
    }
    .join{
        .swiper-container {
            position: relative;
            font-size: 0;
            width: 100%;
            .swiper-wrapper{
                .swiper-slide{
                    width: 100%;
                    img{
                        width: 100%;
                    }
                }
            }
            .swiper-button-prev{
                width: 66px;
                height: 66px;
                background-image: url(../img/page-left.png);
                background-size: contain;
            }
            .swiper-button-next{
                width: 66px;
                height: 66px;
                background-image: url(../img/page-right.png);
                background-size: contain;
            }
            .swiper-button-prev{
                width: 66px;
                height: 66px;
                background-image: url(../img/join_arrow_left.jpg);
                background-size: contain;
            }
            .swiper-button-next{
                width: 66px;
                height: 66px;
                background-image: url(../img/join_arrow_right.jpg);
                background-size: contain;
            }
            // .my-pagination{
            //     z-index: 2;
            //     position: absolute;
            //     top: 50%;
            //     left: 0;
            //     right: 0;
            //     margin: auto;
            //     transform: translateY(-50%);
            //     width:92%;
            //     display:flex;
            //     justify-content: space-between;
            // }
        }
        .jion-detail{
            font-size: 0;
            img{
                width: 100%;
            }
        }
    }
    // 线样式
    .line-box01,.line-box02,.line-box03{
        z-index: 9;
    }
    .line-box01{
        position: relative;
        >div{
            position: absolute;
        }
        >div:first-child{
            width:65.5%;
            height: 350px;
            top: -15px;
            left: 19.47%;
            overflow: hidden;
            .mask{
                // hover改变宽度
                width: 0%;
                height: 100%;
                transition: all 2s linear;
                position: absolute;
                right: 0;
                overflow: hidden;
                img{
                    position: absolute;
                    right: 0;
                }
            }
        }
        // >div:first-child:hover .mask{
        //     width: 100%;
        // }
        >div:nth-child(2){
            width: 10.3%;
            top: 876px;
            left: 126px;
            .mask{
                width: 100%;
                // hover 改变高度
                height: 0px;
                transition: all 1s linear;
                position: absolute;
                top: 0;
                overflow: hidden;
                img{
                    position: absolute;
                    top: 0;
                }
            }
        }
        // >div:nth-child(2):hover .mask{
        //     height: 260px;
        // }
        >div:nth-child(3){
            width: 9.4%;
            top: 1309px;
            right: 7.4%;
            .mask{
                width: 100%;
                // hover 改变高度
                height: 0px;
                transition: all 1s linear;
                position: absolute;
                top: 0;
                overflow: hidden;
                img{
                    position: absolute;
                    top: 0;
                }
            }
        }
        // >div:nth-child(3):hover .mask{
        //     height: 500px;
        // }
        >div:nth-child(4){
            width: 11.35%;
            top: 1870px;
            left: 150px;
            .mask{
                width: 100%;
                // hover 改变高度
                height: 0px;
                transition: all 1s linear;
                position: absolute;
                top: 0;
                overflow: hidden;
                img{
                    position: absolute;
                    top: 0;
                }
            }
        }
        // >div:nth-child(4):hover .mask{
        //     height: 500px;
        // }
    }
    .line-box02{
        position: relative;
        >div{
            position: absolute;
            width: 29.16%;
            height: 560px;
            top: 403px;
            .mask{
                width: 100%;
                // hover 改变高度
                height: 0px;
                transition: all 1.3s linear;
                position: absolute;
                top: 0;
                overflow: hidden;
                img{
                    position: absolute;
                    top: 0;
                }
            }
            // .mask:hover{
            //     height: 560px;
            // }
        }
    }
    .line-box03{
        z-index: 2;
        position: relative;
        >div{
            position: absolute;
        }
        >div:first-child{
            width: 15.31%;
            right: 0;
            top: -63px;
            .mask{
                width: 100%;
                // hover 改变高度
                height: 0px;
                transition: all 2s linear;
                position: absolute;
                top: 0;
                overflow: hidden;
                img{
                    position: absolute;
                    top: 0;
                }
            }
            // .mask:hover{
            //     height: 900px;
            // }
        }
        
        >div:nth-child(2){
            width: 85.31%;
            right: 6.5%;
            top: 825px;
            .mask{
                // hover 改变宽度
                width: 0%;
                height: 280px;
                transition: all 2s linear;
                position: absolute;
                right: 0;
                overflow: hidden;
                img{
                    position: absolute;
                    right: 0;
                }
            }
            // .mask:hover{
            //     width: 100%;
            // }
        }
        >div:nth-child(3){
            width: 8.18%;
            top: 1045px;
            height: 761px;
            overflow: hidden;
            .mask{
                width: 100%;
                // hover 改变高度
                height: 0px;
                transition: all 2s linear;
                position: absolute;
                right: 0;
                overflow: hidden;
                img{
                    position: absolute;
                    right: 0;
                }
            }
            // .mask:hover{
            //     height:800px;
            // }
        }
    }
}